<!DOCTYPE html>
<html>
<head>
	<title>搜索城市天气</title>
</head>
<body>
<center>
	请输入要查询天气的城市:<input type="text" id="city" name="">
	<div id="container" style="min-width:400px;height:400px"></div></center>
</body>
</html>
 <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
 <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
 <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	$("#city").blur(function(){
		var city = $(this).val();
		$.ajax({
			url:"wea.php",
			data:{city:city},
			dataType:"json",
			type:"post",
			success:function(e){
				// console.log(e);
				var week = "";
				var temp_low = "[";
				var temp_high = "[";
				$.each(e,function(i,v){
					week += v.week+",";
					temp_low+=v.temp_low+',';
					temp_high+=v.temp_high+',';
				});
				week = week.substring(0,27);
				week = week.split(",");
				temp_low+="]";
				temp_high+="]";
				// console.log(week);
				var chart = Highcharts.chart('container', {
			    chart: {
			        type: 'spline'
			    },
			    title: {
			        text: '一周的高低温'
			    },
			    subtitle: {
			        text: '数据来源: 07c'
			    },
			    xAxis: {
			        categories: week
			    },
			    yAxis: {
			        title: {
			            text: '温度'
			        },
			        labels: {
			            formatter: function () {
			                return this.value + '°';
			            }
			        }
			    },
			    tooltip: {
			        crosshairs: true,
			        shared: true
			    },
			    plotOptions: {
			        spline: {
			            marker: {
			                radius: 4,
			                lineColor: '#666666',
			                lineWidth: 1
			            }
			        }
			    },
			    series: [{
			        name: '最高温',
			        marker: {
			            symbol: 'square'
			        },
			        data: eval(temp_high)
			    }, {
			        name: '最低温',
			        marker: {
			            symbol: 'diamond'
			        },
			        data: eval(temp_low)
			    }]
			});

			}
		});
	});
</script>